<!--
 * @Author: 王灿
 * @Date: 2019-11-17 22:11:51
 * @LastEditTime: 2020-04-18 13:10:11
 * @Description: 配置管理
 * @FilePath: \scarlet-sparrow-admin\src\views\configure\index.vue
 -->
<template>
  <div class="configure">
    <!-- 配置title -->
    <jq-title
      :title="title"
      :searchKey="searchKey"
      @addTableRow="onTableRow"
      @onChangeName="onChangeName"
    />
    <!-- table -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5">
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="onHandleClick"
      >
        <el-tab-pane label="默认配置" name="first">
          <default-config
            :isDefaultConfigFlag="activeName === 'first'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="升级资格" name="second">
          <upgrade-seniority
            :isUpgradeSeniorityFlag="activeName === 'second'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="购买收益" name="third">
          <purchase-income
            :isPurchaseIncomeFlag="activeName === 'third'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="推广返佣" name="fourth">
          <promotion-commission
            :isPromotionCommissionFlag="activeName === 'fourth'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="商品类型" name="fifth">
          <Commodity-type
            :isCommodityTypeFlag="activeName === 'fifth'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="快递配置" name="six">
          <express-configure
            :isExpressConfigureFlag="activeName === 'six'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="印象标签配置" name="seven">
          <impression-label
            :isImpressionLabelFlag="activeName === 'seven'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="首页广告位" name="eighth">
          <adv-space
            :isAdvSpaceFlag="activeName === 'eighth'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="银行名称配置" name="ninth">
          <bank-name
            :isBankNameFlag="activeName === 'ninth'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="下载地址配置" name="ten">
          <download-address
            :isDownloadAddressFlag="activeName === 'ten'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
        <el-tab-pane label="产地配置" name="eleven">
          <product-address
            :isProductAddressFlag="activeName === 'eleven'"
            :isSearchFlag="isSearchFlag"
            :searchKey="searchKey"
            :isRefresh="isRefresh"
            :name="name"
            @editTableRow="onEditTableRow"
          />
        </el-tab-pane>
      </el-tabs>
    </happy-scroll>
    <!-- 新增/编辑 -->
    <el-dialog
      :title="tabTitle"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
    >
      <configure-operate @addTableRow="onTableRow" :row="tabRow" :type="type" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import DefaultConfig from './DefaultConfig.vue'
import UpgradeSeniority from './UpgradeSeniority.vue'
import PurchaseIncome from './PurchaseIncome.vue'
import PromotionCommission from './PromotionCommission.vue'
import CommodityType from './CommodityType.vue'
import ConfigureOperate from './ConfigureOperate.vue'
import ExpressConfigure from './ExpressConfigure.vue'
import ImpressionLabel from './ImpressionLabel.vue'
import AdvSpace from './AdvSpace.vue'
import BankName from './BankName.vue'
import DownloadAddress from './DownloadAddress.vue'
import ProductAddress from './ProductAddress.vue'

export default {
  name: 'Configure',
  components: {
    JqTitle,
    DefaultConfig,
    UpgradeSeniority,
    PurchaseIncome,
    PromotionCommission,
    CommodityType,
    ConfigureOperate,
    ExpressConfigure,
    ImpressionLabel,
    AdvSpace,
    BankName,
    DownloadAddress,
    ProductAddress
  },
  data() {
    return {
      title: { label: '默认配置', flag: true, searchFlag: true },
      tableData: [],
      tabRow: {},
      isShow: false,
      tabTitle: '新增',
      activeName: 'first',
      name: '',
      isSearchFlag: false,
      searchKey: false,
      type: 1,
      isRefresh: false
    }
  },
  watch: {
    // 刷新页面
    isRefresh() {
      if (this.isRefresh) {
         this.isSearchFlag = true
      }
    }
  },
  methods: {
    // 父子组件通讯
    onTableRow(data) {
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh
      this.tabTitle = '新增'
      this.tabRow = {}
      this.isSearchFlag = false
      this.searchKey = false
    },
    // name模糊搜搜
    onChangeName(name) {
      this.name = name
      this.isSearchFlag = true
      this.searchKey = false
    },
    // tabs切换
    onHandleClick(tab) {
      this.title.label = tab.label
      if (tab.label === '默认配置') {
        this.type = 1
      } else if (tab.label === '升级资格') {
        this.type = 2
      } else if (tab.label === '购买收益') {
        this.type = 3
      } else if (tab.label === '推广返佣') {
        this.type = 4
      } else if (tab.label === '商品类型') {
        this.type = 5
      } else if (tab.label === '快递配置') {
        this.type = 8
      } else if (tab.label === '印象标签配置') {
        this.type = 9
      } else if (tab.label === '首页广告位') {
        this.type = 10
      } else if (tab.label === '银行名称配置') {
        this.type = 11
      } else if (tab.label === '下载地址配置') {
        this.type = 12
      } else if (tab.label === '产地配置') {
        this.type = 14
      }
      this.isSearchFlag = false
      this.name = ''
      this.searchKey = true
    },
    // 父子组件通讯编辑
    onEditTableRow(row) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.tabTitle = '编辑'
    }
  }
}
</script>

<style lang="scss">
.configure {
  width: 100%;
  height: 100%;
  @include column;
  thead {
    line-height: 35px !important;
    th {
      padding: 0 !important;
      background-color: #f5f5f5 !important;
    }
  }
  tbody {
    td {
      padding: 0 !important;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
